<template>
    <ul>
        <li v-for="item in list" :key="item.id" @click="$router.push('/login')">
            <div class="itemImg">
                <img :src="item.image" alt="">
            </div>
            <div class="itemInfo">
                <p>{{item.title}}</p>
                <p style="color:red">￥{{item.price}}</p>
            </div>
        </li>
    </ul>
</template>
<script setup>
import request from '@/utils/request.js'
import { onMounted,ref } from 'vue'
const list=ref([])
onMounted(() => {
  request.get('/list',{
    params: {
        pagination:1,
        pageNum:20
    }
  }).then((res) => {
    if(res.data.code==200)
    {
      list.value=res.data.data
    }
  })
})
</script>
<style lang='scss' scoped>
ul{
    column-count: 2;
    column-gap: 10px;
    li{
        break-inside: avoid;
        .itemImg{
            img{
                width: 100%;
            }
        }
        .itemInfo{
            padding: 8px 2px;
        }
    }
}
</style>